<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scala=1,minimum-scale=1">
<head>
	<title>flex+rem布局</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
	<div class="theand">
		<ul class="nav_ul">
			<li>
				<img src="imges/banner.jpg" alt="">
			</li>
			<li>
				<img src="imges/banner.jpg" alt="">
			</li>
			<li>
				<img src="imges/banner.jpg" alt="">
			</li>
		</ul>
	</div>
	<div class="nanv">
		<div class="nav_input">
			<span class="bcgimg"></span>
			<input type="text" name="" placeholder="搜索:目的地/酒店/景点/航班号">
		</div>
		<div class="admin">
			<div class="bcg_rimg"></div>
			我的
		</div>
	</div>
	<ul class="list">
		<li>
			<span class="list-icon1"></span>
			<span><a href="javascript:;">攻略·景点</a></span>
		</li>
		<li>
			<span class="list-icon2"></span>
			<span><a href="javascript:;">门票·玩乐</a></span>
		</li>
		<li>
			<span class="list-icon3"></span>
			<span><a href="javascript:;">美食林</a></span>
		</li>
		<li>
			<span class="list-icon4"></span>
			<span><a href="javascript:;">周边游</a></span>
		</li>
		<li>
			<span class="list-icon5"></span>
			<span><a href="javascript:;">一日游</a></span>
		</li>
	</ul>
	<nav class="bodynav">
		<div class="bdnav_div1">
			<div>酒店</div>
			<div>名宿·客栈</div>
			<div>特价爆款</div>
		</div>
		<div class="bdnav_div2">
			<div>机票</div>
			<div>火车票</div>
			<div>汽车·船票</div>
			<div>专车·租车</div>
		</div>
		<div class="bdnav_div3">
			<div>旅游</div>
			<div>高铁游</div>
			<div>邮轮游</div>
			<div>定制游</div>
		</div>
	</nav>
	<div class="footnav">
		 <div class="ftnav_div1">
			 <div>
				 <span></span>
				 <a href="javascript:;">自由行</a>
			 </div>
			 <div>
				<span></span>
				<a href="javascript:;">WiFi电话卡</a>
			</div>
			<div>
				<span></span>
				<a href="javascript:;">保险·签证</a>
			</div>
			<div>
				<span></span>
				<a href="javascript:;">换钞·购物</a>
			</div>
			<div>
				<span></span>
				<a href="javascript:;">向导·包车</a>
			</div>
		 </div>
		 <div class="ftnav_div2">
			<div>
			   <span></span>
			   <a href="javascript:;">特价机票</a>
		   </div>
		   <div>
			   <span></span>
				<a href="javascript:;">礼品卡</a>
		   </div>
		   <div>
			   <span></span>
			   <a href="javascript:;">申卡·借钱</a>
		   </div>
		   <div>
			   <span></span>
			   <a href="javascript:;">旅拍</a>
		   </div>
		   <div>
			   <span></span>
			   <a href="javascript:;">更多</a>
		   </div>
		 </div>
	</div>
	<div class="foot">
		<div>
			<span></span>
			<a href="javascript:;">
				电话预约
			</a>
		</div>
		<div>
			<span></span>
			<a href="javascript:;">
				下载客户端
			</a>
		</div>
		<div>
			<span></span>
			<a href="javascript:;">
				我的
			</a>
		</div>
	</div>

	<div class="tfoot">
		<span>
			<a href="javascript:;">网站地图</a>
		</span>
		<span class="spaft">
			<a href="javascript:;">Language</a>
		</span>
		<span>
			<a href="javascript:;">电脑版</a>
		</span>
		

	</div>
	<div class="tfoot">
		<span class="afterspan">
			<a href="javascript:;">2020携程旅行</a>
		</span>
		<span>
			<a href="javascript:;">泸ICP备08023580号</a>
		</span>
	</div>
	<script>
		window.addEventListener("load",()=>{
			let html = document.querySelector("html");
			let nanv = document.querySelector(".nanv");
			let navul = document.querySelector(".nav_ul");
			let navul_li = document.querySelector(".nav_ul li");
			let uavulChildren = navul.children.length;
			let uavulChildrenWidth = navul_li.offsetWidth * uavulChildren;
			navul.style.width = uavulChildrenWidth + "px";
			document.addEventListener("scroll",function(){
				if (window.pageYOffset == 0) {
					nanv.style.backgroundColor = "";
					console.log(1);
				}else{
					nanv.style.backgroundColor = "#4ac6ff";
					console.log(2);
				}
			})
			window.addEventListener("resize",function(){
				if (window.innerWidth > 750) {
					html.style.fontSize = "54.2px";
				}else{
					html.style.fontSize = window.innerWidth / 10 + "px";
				}
			})
			let num = 0;
			setInterval(function(){
				if (num == uavulChildren) {
					num = 0;
				}
				navul.style.left = -navul_li.offsetWidth * num + "px";
				num++;
			},2000)
		})
	</script>
</body>
</html>